<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.parent{
			width: 100px;
			height: 100px;
			margin: 0 auto;
			background-color: aquamarine;
			padding: 50px;
		}
		.parent .child{
			width: 100px;
			height: 100px;
			/*margin: 50px;*/
			background-color: pink;
		}
	</style>
	<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			//基本事件
//			$(".child").click(function(){//参数形式没有等于号
//				console.log(0)
//			})
//			$(".child").click(function(){//参数形式没有等于号
//				console.log(1)//js 只取最后一个
//               直接写click
//			})
//			$(".child").mousemove(function(e){//参数形式没有等于号
//				console.log(e)
//				console.log(e.offsetX,e.offsetY)
//			})
//			$(".child").mouseover(function(e){
//				$(this).css("background-color","red")
//			}).mouseout(function(){
//				$(this).css("background-color","blue")
//				
//			})
//			$(".child").hover(function(){
//				$(this).css("background-color","red")
//			},function(){
//				$(this).css("background-color","blue")
//			})
		function stopPropagation(e){
			e.stopPropagation();//zuz
			e.preventDefault();//阻止默认行为
			//ex： subimt  reset a【href】
			return false;//直接干掉他 
		}
			$(".child").click(function(e){
				console.log(".child")//evt even 
				return stopPropagation(e);
				//调用他  return 返回他因为要不然下次调用他是上一次的返回值
			})//阻止冒泡
			$(".parent").click(function(e){
				console.log(".parent")//evt even 
			})//阻止冒泡
			
		})
	</script>
	<body>
		<div class="parent">
			<div class="child"></div>
		</div>
	</body>
</html>
